• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

206
Vistas
Cómo puedo cambiar el color de entrada de Material UI TextField cuando la entrada está deshabilitada [MUI v: 5.0.8]

Quiero cambiar el color del borde y el color del texto cuando la entrada está deshabilitada. Probé todas las variantes como se ve a continuación:

 const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', }, '& .MuiOutlinedInput-root': { color:darkMode?'#1976d2':'', '& fieldset': { borderColor:darkMode?'#1976d2':'', }, '&:hover fieldset': { borderColor: darkMode?'#1976d2':'', }, }, "& input.Mui-disabled": { color: "green" } };

<TextField value={formState.vinInput} type="text" label="Stack" sx={textFieldStyle}/>

¡El resto del estilo funciona bien como el color general y el color enfocado!

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

puedes usar este código en v4:

 MuiInputBase: { root: { "&$disabled": { color: "red", border: "1px solid red" } } }

basado en la documentación de Material-ui en la versión 5 La sintaxis $ utilizada con JSS no funcionará con Emotion. Debe reemplazar esos selectores con un selector de clase válido.

este es el estilo

 const useStyles = makeStyles({ customDisable: { "& .MuiInputBase-input.Mui-disabled": { color: "red !important", "-webkit-text-fill-color": "red !important", borderColor: "red !important" }, "& .Mui-disabled .MuiOutlinedInput-notchedOutline": { borderColor: "red !important" } } });

y luego en TextField así

 <TextField disabled className={classes.customDisable} id="outlined-disabled" defaultValue="Hello World" />

aquí está el Codesandbox

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda